<html>

	<head>
		<meta charset="UTF-8">
		<title>新增笔记</title>
		<!--标准mui.css-->
		<link rel="stylesheet" href="../css/mui.min.css">
		<link rel="stylesheet" href="../css/mooc.css">
	</head>
	<style>
		body {
			background: white;
		}
		
		.mui-title {
			color: white;
		}
		
		.mui-icon-left-nav {
			color: white;
		}
		
		.mui-content {
			background: white;
			height: 200px;
		}
		
		.mui-bar.mui-bar-tab {
			background: white;
		}
		
		.savebtn {
			margin-top: 12px;
			font-size: 17px;
			color: white;
		}
		
		.resinfodiv {
			height: 45px;
			border-bottom: 1px solid #dddddd;
		}
		
		.restype-div {
			float: left;
			width: 60px;
			text-align: center;
			color: #fff;
			font-size: 13px;
			padding: 1px 2px 1px 2px;
			margin-left: 20px;
			margin-top: 11px;
		}
		
		.restype-div.sp {
			background: #4cc8e7;
		}
		
		.restype-div.jy {
			background: #ff9d34;
		}
		
		.restype-div.xt {
			background: #ff9d34;
		}
		
		.restype-div.st {
			background: #a5b9eb;
		}
		
		.restype-div.stjc {
			background: #799aed;
		}
		
		.restype-div.tp {
			background: #95c85d;
		}
		
		.restype-div.kj {
			background: #ff8873;
		}
		
		.resname-div {
			float: left;
			margin-left: 20px;
			margin-top: 11px;
		}
	</style>

	<body>
		<header class="mui-bar mui-bar-nav headbar">
			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a><a id="savebtn" class="mui-pull-right savebtn">保存</a>
			<h1 class="mui-title" id='resnameh1'>笔记</h1>
		</header>
		<div class="mui-content">
			<div class="resinfodiv">
				<span id="rescat" class="restype-div sp"> </span><span id="restitle" class="resname-div"> </span>
			</div>
			<div class="mui-input-row" style="margin:10px 5px 0px 5px;">
				<textarea id="textarea" rows="8" placeholder="请填写笔记"></textarea>
			</div>
		</div>
	</body>
	<script type="text/javascript" src="../js/mui.min.js"></script>
	<script type="text/javascript" src="../script/config.js"></script>
	<script type="text/javascript" src="../script/moocpublic.js"></script>
	<script src="../js/fastclick.js"></script>
	<script type="text/javascript" src="../js/DMobileFrame_DownLoadUtil.js"></script>
	<script>
	   var localStorageManagers=require('script/localStorageManagers.js');
		var downloadUtils = require('scripts/Core/DownLoadUtil.js');
		var mobileFrame=require('scripts/Core/MobileFrame.js');
		var courseid;
		var catalogid;
		var resid;
		var restitle;
		(function($) {
			//mui初始化
			mui.init({
				swipeBack: true
			});
			FastClick.attach(document.body);
			//plus初始化
			mui.plusReady(function() {
				var self = plus.webview.currentWebview();
				 courseid = self.courseid;
				 catalogid = self.catalogid;
				 resid = self.resid;
				 restitle=self.restitle;
				var  rescatname = self.rescatname;
				var preClass=getCatClass(rescatname);
				var catEle=document.getElementById('rescat');
				catEle.className='restype-div '+preClass;
				catEle.innerText = rescatname;
				setNote(courseid,catalogid,resid);
				document.getElementById('restitle').innerHTML=restitle;
			});
			//保存笔记
			mui(document).on('tap', '#savebtn', saveNote);
			//返回
			mui(document).on('tap','.mui-action-back',function(){
				var resWebView = plus.webview.getWebviewById("selfcourseview/resView");
	            //resWebView.evalJS("playVideo()");
			});
			//输入框焦点
		})(mui);
		//获取笔记对象
		function setNote(courseid,catalogid,resid){
			var userid=localStorageManagers.getUseridSession();
			mui.ajax(serverAjax + "/mobile/note/getNote.do", {
				type: "post",
				dataType: 'json',
				data: {
					userid:userid,
					resid: resid,
					catalogid: catalogid,
					courseid: courseid
				},
				success: function(data) {
					if(data==null||data.length==0)return;
					document.getElementById('textarea').value=data.noteContent;
				},
				error: function(xhr, type, errorThrown) {
					ajaxErrorTip();
					console.log(xhr);
				}
			});
		}
		//保存笔记方法
		function saveNote() {
			if(!mobileFrame.IsNetWorkCanUse())return;
			var userid=localStorageManagers.getUseridSession();
			var noteContent = document.getElementById('textarea').value;
			if (noteContent.length == 0) {
				mui.toast("请填写笔记内容");
				return;
			}
			if (noteContent.length > 500) {
				mui.toast("最多不超过500字！");
				return;
			}
			mui.ajax(serverAjax + "/mobile/note/SaveNote.do", {
				type: "post",
				dataType: 'json',
				data: {
					userId:userid,
					resId: resid,
					catalogId: catalogid,
					courseId: courseid,
					noteContent: noteContent
				},
				success: function(msg) {
					if(msg==1){
						mui.toast('保存成功');
						mui.back();
						//刷新笔记页签
						var resWebView = plus.webview.getWebviewById("selfcourseview/resView");
	                    resWebView.evalJS("loadNotes()");
	                    //resWebView.evalJS("playVideo()");
						//
					}else{
						mui.toast('保存失败');
					}
				},
				error: function(xhr, type, errorThrown) {
					ajaxErrorTip();
					console.log(xhr);
				}
			});
		}
		//获得资源类别显示背景色
		function getCatClass(preName) {
			var preClass = 'xt';
			switch (preName) {
				case "视频":
					preClass = 'sp';
					break;
				case "讲义":
					preClass = 'jy';
					break;
				case "习题":
					preClass = 'xt';
					break;
				case "教案":
					preClass = 'jy';
					break;
				case "随堂检测":
					preClass = 'stjc';
					break;
				default:
					preClass = 'xt';
			}
			return preClass;
		}
	</script>

</html>